<div layout="row" layout-fill>
  <div flex="25" class="md-list-item-text">
    <div>{{policy.name | characters: 20}}</div>
    <div class="hint">{{vm.fieldNameMap[policy.name].derivedDataType | characters: 20}}</div>
    <md-tooltip md-direction="left" ng-if="vm.fieldNameMap[policy.name].description">
      {{vm.fieldNameMap[policy.name].description}}
    </md-tooltip>
  </div>
  <div flex="10" class="md-list-item-text">
    <ng-md-icon ng-if="policy.domainTypeId != null" icon="{{vm.getDomainType(policy.domainTypeId).icon}}" size="32" title="{{vm.getDomainType(policy.domainTypeId).title}}"
                ng-style="{'fill':vm.getDomainType(policy.domainTypeId).iconColor}">
    </ng-md-icon>
  </div>
  <div flex="40" class="md-list-item-text" layout-align="space-between start" layout="row">
    <div class="data-policy-item-check-box">
      <ng-md-icon class="primary-color-1" icon="check_box" ng-if="vm.fieldNameMap[policy.name].primaryKey"></ng-md-icon>
      <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!vm.fieldNameMap[policy.name].primaryKey"></ng-md-icon>
    </div>
    <div class="data-policy-item-check-box">
      <ng-md-icon class="primary-color-1" icon="check_box" ng-if="vm.fieldNameMap[policy.name].createdTracker"></ng-md-icon>
      <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!vm.fieldNameMap[policy.name].createdTracker"></ng-md-icon>
    </div>
    <div class="data-policy-item-check-box">
      <ng-md-icon class="primary-color-1" icon="check_box" ng-if="vm.fieldNameMap[policy.name].updatedTracker"></ng-md-icon>
      <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!vm.fieldNameMap[policy.name].updatedTracker"></ng-md-icon>
    </div>
    <div class="data-policy-item-check-box">
      <ng-md-icon class="primary-color-1" icon="check_box" ng-if="policy.index"></ng-md-icon>
      <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!policy.index"></ng-md-icon>
    </div>
    <div class="data-policy-item-check-box">
      <ng-md-icon class="primary-color-1" icon="check_box" ng-if="policy.profile"></ng-md-icon>
      <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!policy.profile"></ng-md-icon>
    </div>
  </div>
  <div flex="25" class="md-list-item-text hint data-policy-item layout-margin-left-10">
    <ul class="list-item">
      <li ng-if="vm.getAllFieldPolicies(policy).length <= 2" ng-repeat="rule in vm.getAllFieldPolicies(policy) | limitTo:2">{{rule.name}}</li>
      <li ng-if="vm.getAllFieldPolicies(policy).length > 2" ng-repeat="rule in vm.getAllFieldPolicies(policy) | limitTo:1">{{rule.name}}</li>
      <li ng-if="vm.getAllFieldPolicies(policy).length > 2">
        + {{vm.getAllFieldPolicies(policy).length - 1}} More
        <ng-md-icon
          size="18"
          style="height: 15px"
          icon="more_horiz"></ng-md-icon>
      </li>
    </ul>
    <md-tooltip
        class="tooltip-multi-line"
        ng-if="vm.getAllFieldPolicies(policy).length > 2"
        md-direction="right">
      <ul id="data-policy-item-tooltip-list" >
        <li ng-repeat="rule in vm.getAllFieldPolicies(policy)">{{rule.name}}</li>
      </ul>
    </md-tooltip>
  </div>
</div>
